<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="../../s/element-ui/2.13.2/theme-chalk/index.css">
<title>Form 表单</title>
<style type="text/css">
[v-cloak] {
	display: none !important;
}
</style>
</head>
<body>
	<div id="app" v-cloak>
		<h3>基础表单</h3>
		<form is="el-form" ref="form" :model="form" label-width="80px">
			<div is="el-form-item" label="活动名称">
				<input is="el-input" v-model="form.name"/>
			</div>
			<div is="el-form-item" label="活动区域">
				<select is="el-select" v-model="form.region" placeholder="请选择活动区域">
					<option is="el-option" label="区域一" value="shanghai"></option>
					<option is="el-option" label="区域二" value="beijing"></option>
				</select>
			</div>
			<div is="el-form-item" label="活动时间">
				<div is="el-col" :span="11">
					<span is="el-date-picker" type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></span>
				</div>
				<div is="el-col" class="line" :span="2">-</div>
				<div is="el-col" :span="11">
					<span is="el-date-picker" type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></span>
				</div>
			</div>
			<div is="el-form-item" label="即时配送">
				<span is="el-switch" v-model="form.delivery"></span>
			</div>
			<div is="el-form-item" label="活动性质">
				<div is="el-checkbox-group" v-model="form.type">
					<span is="el-checkbox" label="美食/餐厅线上活动" name="type"></span>
					<span is="el-checkbox" label="地推活动" name="type"></span>
					<span is="el-checkbox" label="线下主题活动" name="type"></span>
					<span is="el-checkbox" label="单纯品牌曝光" name="type"></span>
				</div>
			</div>
			<div is="el-form-item" label="特殊资源">
				<div is="el-radio-group" v-model="form.resource">
					<span is="el-radio" label="线上品牌商赞助"></span>
					<span is="el-radio" label="线下场地免费"></span>
				</div>
			</div>
			<div is="el-form-item" label="活动形式">
				<span is="el-input" type="textarea" v-model="form.desc"></span>
			</div>
			<div is="el-form-item">
				<button is="el-button" type="primary" @click="onSubmit">立即创建</button>
				<button is="el-button">取消</button>
			</div>
		</form>
	</div>
	<script src="../../s/vue/2.7.16/vue.min.js"></script>
	<script src="../../s/element-ui/2.13.2/index.js"></script>
	<script>
		new Vue({
			el : '#app',
			data : function() {
				return {
					form: {
						name: '',
						region: '',
						date1: '',
						date2: '',
						delivery: false,
						type: [],
						resource: '',
						desc: ''
					}
				};
			},
			methods : {
				onSubmit() {
			        console.log('submit!');
			    }
			}
		})
	</script>
</body>
</html>
<!-- 
W3C 标准中有如下规定：
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.
即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 <el-form> 标签上添加 @submit.native.prevent。
 -->